<template>
	<view class="container activity-detail-container">
		<view class="detail-top">
			<swiper class="swiper-panel" circular :autoplay="true" :interval="5000" :duration="500"
				v-if="pageTopType==='img'">
				<swiper-item>
					<view class="swiper-item">
						<image class="banner-img" :src="$resFileUrl+detailInfo.imgUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="video-panel" v-else>
				<video class="banner-img" :src="$resFileUrl+detailInfo.video"></video>
				<!-- <text class="iconfont">&#xe631;</text>
				<image class="banner-img" :src="$fileUrl+'banner.png'" mode="aspectFill"></image> -->
			</view>
			<view class="top-btn-box">
				<view class="yuan-btn " :class="pageTopType==='video'?'btn-success':'btn-default'"
					@click="pageTopType='video'">视频</view>
				<view class="yuan-btn " :class="pageTopType==='img'?'btn-success':'btn-default'"
					@click="pageTopType='img'">图片</view>
			</view>
		</view>
		<view class="activity-main">
			<view class="ac-m-gary">
				<view class="activity-title">
					<div class="data-imgico">{{getStateName(detailInfo.state)}}</div>
					<text>{{detailInfo.title}}</text>
				</view>
				<view class="activity-content">
					<rich-text class="rich-box" :nodes="detailInfo.remark"></rich-text>
				</view>
			</view>
			<view class="activity-intro">
				<view class="intro-title">活动时间及地点</view>
				<view class="intro-info">
					<view>
						<text class="iconfont">&#xe636;</text>
						{{detailInfo.address}}
					</view>
					<view>
						<text class="iconfont">&#xe606;</text>
						{{$format(detailInfo.startDate,'yyyy-MM-dd')}} 至 {{$format(detailInfo.endDate,'yyyy-MM-dd')}}
					</view>
				</view>
				<view class="intro-title">活动形式流程</view>
				<view class="intro-info">
					<rich-text class="rich-box" :nodes="detailInfo.content"></rich-text>
				</view>
			</view>
		</view>
		<view class="activity-action">
			<view class="left-action" @click="jumpIndex">
				<text class="iconfont">&#xe601;</text>
				<view>首页</view>
			</view>
			<view class="flex-grow"></view>
			<view class="left-action">
				<button class="share-btn" open-type="share">
					<text class="iconfont">&#xebab;</text>
					<view>分享</view>
				</button>
			</view>
			<view class="left-action " @click="jump('')">
				<text class="iconfont">&#xec2e;</text>
				<view>客服</view>
			</view>

			<!-- <view class="yuan-btn btn-success">立即参与</view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '@/common/util';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import api from '@/common/api';
	const pageTopType = ref('img')
	const detailInfo = ref<any>({})
	let pageId = ''
	onLoad((options) => {
		pageId = options.id;
	})
	onMounted(async () => {
		//朋友
		const promise = new Promise(resolve => {
			setTimeout(() => {
				resolve({
					title: detailInfo.value.title,
					path: '/pages/index/index?shareType=activity&shareId=' + detailInfo.value.newsId
				})
			}, 2500)
		})
		onShareAppMessage(() => {
			return {
				title: '果园认养',
				path: '/pages/index/index?shareType=activity&shareId=' + detailInfo.value.newsId,
				promise
			}
		})
		//朋友圈
		onShareTimeline(() => {
			return {
				title: detailInfo.value.title,
				path: '/pages/index/index?shareType=activity&shareId=' + detailInfo.value.newsId,
				promise
			}
		});
		await getDetail()
		
	})
	const getDetail = async () => {
		showLoading()
		try {
			const res = await api.getNewsDetail({ id: pageId })
			detailInfo.value = res.data || []
		} finally {
			hideLoading()
		}

	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const jumpIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const getStateName=(state:string)=>{
		const obj={
			1:'未开始',
			2:'进行中',
			3:'已结束'
		}
		return obj[state+''] || ''
	}
</script>

<style lang="scss">
	.activity-detail-container {
		background-color: #fff;
		padding-bottom: 120rpx;

		.detail-top {
			position: relative;
		}

		.swiper-panel {
			height: 440rpx;
		}

		.video-panel {
			height: 440rpx;
			position: relative;

			.iconfont {
				font-size: 88rpx;
				color: #fff;
				position: absolute;
				z-index: 10;
				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
			}
		}

		.banner-img {
			width: 100%;
			height: 440rpx;
		}

		.top-btn-box {
			position: absolute;
			left: 0;
			bottom: 15rpx;
			width: 100%;
			padding: 20rpx;
			z-index: 11;

			.yuan-btn {
				display: inline-flex;
				width: 130rpx;
				height: 62rpx;
				border-radius: 62rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
			}
		}

		.activity-main {
			transform: translateY(-20rpx);

		}

		.ac-m-gary {
			border-radius: 14rpx 14rpx 0 0;
			background-color: #F9F9F9;
			padding: 30rpx;
		}

		.activity-title {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
		}

		.data-imgico {
			width: 110rpx;
			height: 50rpx;
			z-index: 10;
			background-color: #77CC17;
			color: #fff;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx 0 20rpx 0;
			margin-right: 5px;
		}

		.activity-content {
			color: #8F8F8F;
			font-size: 26rpx;
			padding: 30rpx 0;
		}


		.list-bottom {
			display: flex;
			align-items: center;
		}

		.list-header {
			position: relative;
			width: 18rpx;
		}

		.header-bg {
			width: 36rpx;
			height: 36rpx;
			border-radius: 36rpx;
			display: block;
		}

		.list-content {
			flex-grow: 1;
			font-size: 26rpx;
			color: #5B5B5B;
			margin-left: 35rpx;
		}

		.list-surplus {
			font-size: 26rpx;
			color: #5B5B5B;
		}

		.list-sur-num {
			font-size: 34rpx;
			font-weight: bold;
		}

		.activity-intro {
			padding: 30rpx;
		}

		.intro-title {
			font-size: 26rpx;
			color: #232323;
			margin-bottom: 15rpx;
			font-weight: bold;
		}

		.intro-title::before {
			content: '';
			width: 10rpx;
			height: 10rpx;
			display: inline-block;
			border: solid 4rpx #707070;
			border-radius: 16rpx;
			margin-right: 10rpx;

		}

		.intro-info {
			font-size: 28rpx;
			color: #5B5B5B;
			margin-bottom: 20rpx;
			padding: 0 15rpx;

			.iconfont {
				margin-right: 10rpx;
				font-size: 30rpx;
			}
		}

		.activity-action {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
			padding: 0 30rpx;

			.yuan-btn {
				width: 170rpx;
				height: 66rpx;
				border-radius: 66rpx;
			}
		}

		.flex-grow {
			flex-grow: 1;
		}

		.left-action {
			font-size: 24rpx;
			color: #C4C7D0;
			text-align: center;
			margin-right: 30rpx;

			.iconfont {
				font-size: 40rpx;
			}
		}
		.share-btn {
			font-size: 24rpx;
			background-color: transparent;
			color: #C4C7D0;
			line-height: unset;
			padding-left: 0;
			padding-right: 0;
		}
		
		.share-btn::after {
			border: none
		}


		// <view class="activity-action">
		// 	<view class="left-action">
		// 		<text class="iconfont"></text>
		// 		<view>首页</view>
		// 	</view>
		// 	<view class="left-action">
		// 		<text class="iconfont"></text>
		// 		<view>分享</view>
		// 	</view>
		// 	<view class="left-action">
		// 		<text class="iconfont"></text>
		// 		<view>客服</view>
		// 	</view>
		// 	<view class="yuan-btn btn-success">立即参与</view>
		// </view>
	}
</style>